<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生日快乐</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link href="js/styles.css" rel="stylesheet">
</head>
<body>

<div class="bg-hover"></div>

<div class="content">
    <h2 class="header">Happy Birthday!</h2>
    <h2 class="header2">宝宝</h2>
    <ul id="says" class="says"></ul>
</div>

</body>
<script src="js/jquery.v3.2.1.min.js"></script>
<script>
    var toSay = [
        {text: '大叔叔', color: '#001f3f'},
        {text: '祝：', color: '#0074D9'},
        {text: '宝宝', color: '#7FDBFF'},
        {text: '20周岁', color: '#39CCCC'},
        {text: '生日快乐', color: '#3D9970'},
        {text: '笑口常开！', color: '#01FF70'},
        /*{text: '77777', color: '#FFDC00'},
         {text: '5', color: '#FF851B'},
         {text: '5', color: '#FF4136'},
         {text: '5', color: '#85144b'},
         {text: '5', color: '#F012BE'},
         {text: '5', color: '#B10DC9'},
         {text: '5', color: '#AAAAAA'},*/
    ]

    var sayIndex = 0

    var $says = $('#says');

    var itemBaseFontSize = 26;

    var interval = setInterval(function () {
        var item = toSay[sayIndex];
        $('<li>').text(item.text).css({
            'color': item.color,
            'font-size': itemBaseFontSize + Math.ceil(Math.random() * 10) + 'px',
        }).hide().appendTo($says).fadeIn()
        sayIndex++
        if (sayIndex >= toSay.length) {
            clearInterval(interval)
        }
    }, 1000)
</script>


</html>